<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单行文本框</title>
</head>

<body>
<!--1.基本语法-->
<!--在 HTML 中，单行文本框使用 <input> 标签的 type="text" 来创建。可以通过各种属性来设置文本框的行为、样式和限制。
    type="text"：定义为单行文本框。
	name="username"：为该文本框指定一个名称，在表单提交时使用。
	placeholder="请输入用户名"：当文本框为空时显示的提示文本。
-->
<input type="text" name="username" placeholder="请输入用户名">

<!--属性-->
<!--1. value：设置文本框的默认值。-->
<input type="text" name="username" value="默认值">

<!--2. maxlength：限制文本框的最大字符数。-->
<input type="text" name="username" maxlength="10" placeholder="最多10个字符">

<!--3. required：设置为必填项，在表单提交时如果该字段为空会提示用户。-->
<input type="text" name="username" required placeholder="必填">

<!--4. readonly：只读属性，用户无法更改文本框中的内容。-->
<input type="text" name="username" readonly value="只读内容">

<!--5. disabled：禁用文本框，用户无法编辑或选中。-->
<input type="text" name="username" disabled value="已禁用">

<!--6. pattern：通过正则表达式对输入的内容进行格式验证。-->
<input type="text" name="username" pattern="[A-Za-z]{3,}" placeholder="请输入至少3个字母">


<!--3. 与javascript使用-->
<input type="text" id="username1" placeholder="请输入用户名">
<button onclick="clearText()">清除内容</button>

<script>
    function clearText() {
        document.getElementById("username").value = "";
    }
</script>


<!--4.使用事件监听-->
<!--常见事件有 onfocus、onblur、oninput 等。-->
<input type="text" id="username2" placeholder="请输入用户名"
       onfocus="this.style.backgroundColor='lightyellow';"
       onblur="this.style.backgroundColor='';">





</body>
</html>